<template>
  <ul>
    <li
      v-for="(item, index) in list"
      :key="index"
      @click="gotobuyticket(item.movieid)"
    >
      <img :src="item.img.split('w.h').join('')" alt="" />
      <div class="r-main">
        <div class="m-name">
          <h2>{{ item.nm }}</h2>
          <span v-if="item.version === 'v2d imax'" class="v2d"></span>
          <span v-else-if="item.version === 'v3d imax'" class="v3dm"></span>
          <span v-else-if="item.version === 'v3d'" class="v3d"></span>
          <span v-else class="dianying"></span>
        </div>
        <p v-if="item.sc" class="col-glod">
          观众评分<b>{{ item.sc }}</b>
        </p>
        <p v-if="!item.sc" class="col-glod">
          <b>{{ item.wish }}</b>
          人想看
        </p>
        <p class="m-Actor">主演：{{ item.star }}</p>
        <p>{{ item.showInfo }}</p>
      </div>
      <button v-show="item.showst === 3" class="f-preShow">购票</button>
      <button v-show="item.showst === 4" class="t-preShow">预售</button>
    </li>
  </ul>
</template>

<script>
// 引入数据接口 api.js
import { getMoviesDataApi, postMoviesDataApi } from "../../utils/api";
export default {
  props: {
    num: Number,
  },
  data() {
    return {
      list: [],
      ids: [],
      startid: 0,
      size: 6,
    };
  },
  mounted() {
    this.getlist();
  },
  watch: {
    async num() {
      // 截取需要的数据id，用以发送请求；
      const arr = this.ids.splice(this.startid, this.startid + this.size);
      // 数组转换成字符串
      const str = arr.join(",");
      // 传入ids给接口，返回对应的数据组
      const data = await postMoviesDataApi({ ids: str });
      // concat 合并数组，返回原数组
      this.list = this.list.concat(data.result);
      // 累加请求的id
      this.startid += this.size;
      // 将回调延迟到下次 DOM 更新循环之后执行
      await this.$nextTick();
      // 数据已经请求成功，高度没有改变，向父组件发送信号，重新计算高度。并传给父组件一个布尔值，判断是否到底
      this.$emit("postdata", this.list.length >= this.ids.length);
    },
  },
  methods: {
    //跳转购票详情页
    gotobuyticket(id) {
      this.$router.push("/buyticket/" + id);
    },
    async getlist() {
      // 首次请求数据
      const res = await getMoviesDataApi();
      this.list = res.result;
      // 获取所有数据的id
      this.ids = res.ids;
      // 记录已经加载id个数
      this.startid = this.list.length;
      // 将回调延迟到下次 DOM 更新循环之后执行
      await this.$nextTick();
      // 告诉父元素数据加载完比，可以请求
      this.$emit("finish");
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";
ul {
  font-size: 13px;
  margin-top: 10px;
  background: #fff;
  li {
    .center();
    padding: 15px;
    border-bottom: 1px solid @border-color;
    color: #666;
    img {
      width: 60px;
      height: 90px;
    }
    .r-main {
      width: 202px;
      height: 90px;
      margin-left: 15px;
      margin-right: auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .m-name {
        width: 100%;
        height: 24px;
        line-height: 24px;
        overflow: hidden;
        h2 {
          font-size: 17px;
          display: inline-block;
          margin-right: 5px;
          color: #333;
        }
        span {
          display: inline-block;
          width: 43px;
          height: 14px;
          margin-right: auto;
          background-size: 43px 14px;
        }
        .v2d {
          background-image: url("../../assets/img/v2d.png");
        }
        .v3dm {
          background-image: url("../../assets/img/v3dm.png");
        }
        .v3d {
          background-image: url("../../assets/img/v3d.png");
        }
        .dianying {
          background-image: url("../../assets/img/dianying.png");
          background-repeat: no-repeat;
          background-size: 23px 14px;
        }
      }
      .m-Actor {
        width: 202px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      b {
        color: #faaf00;
        font-size: 15px;
      }
    }
    button {
      width: 47px;
      height: 27px;
      border-radius: 5px;
      outline: none;
      border: none;
      color: #fff;
      margin-right: 15px;
    }
    .f-preShow {
      background: @m-color;
    }
    .t-preShow {
      background: #3c9fe6;
    }
  }
}
</style>
